<template>
	<span
		v-if="value && value != '0'"
		@mouseenter="handleMouseEnter($event)"
		@mouseleave="handleMouseLeave($event)"
	>
		<a v-if="link" style="margin: 0" @click="$router.turn(link, open)">
			<span v-if="title">{{ title }}</span>
			<span v-else>{{ value }}</span>
		</a>

		<span v-else>
			<span v-if="title">{{ title }}</span>
			<span v-else>{{ value }}</span>
		</span>

		<a-tooltip>
			<template slot="title"> 点击复制 `{{ value }}` </template>
			<a-icon
				v-clipboard:copy="value"
				v-clipboard:success="() => $message.success('内容已复制到剪切板！')"
				v-clipboard:error="() => $message.success('抱歉，复制失败！')"
				class="copy-icon"
				type="copy"
				style="display: none; margin-left: 6px; cursor: pointer"
			/>
		</a-tooltip>
	</span>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "",
			},
			value: {
				type: [Number, String],
				default: null,
			},
			link: {
				type: String,
				default: undefined,
			},
			open: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {}
		},
		mounted() {},
		methods: {
			handleMouseEnter(e) {
				e.target.querySelector(".copy-icon").style.display = ""
			},
			handleMouseLeave(e) {
				e.target.querySelector(".copy-icon").style.display = "none"
			},
		},
	}
</script>

<style scoped></style>
